<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>消息插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />

	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#exp1").click(function(){
			hy.message("Hello World");
		});
		$("#exp2").click(function(){
			hy.message("Hello World", true);
		});
		$("#exp3").click(function(){
			hy.message("Hello World", ["top:2","right:2"]);
		});
		$("#exp4").click(function(){
			hy.message("Hello World", "warning");
		});
		$("#exp5").click(function(){
			hy.message("Are you sure?","confirm");
		});
		$("#exp6").click(function(){
			hy.message("Are you sure?", {
				type: "confirm",
				modal: "true",
				title: "信息提示", // 非确认对话框也可以指定
				onConfirm: function(b) { 
					var m = b ? "点击了确定" : "点击了取消";
					hy.message(m,{
						auto_close : true, // 自动关闭
						show_close: false // 显示关闭按钮
					});
				}
			});
		});
		$("#exp8").click(function(){
			hy.message("Design by sylthasgg@gmail.com",{
				modal: true,
				title: "message plugin for hyui",
				type: "success",
				auto_close: true,
				position:["right:2","bottom:2"],
				shadow_bgcolor:"#ff0",
				shadow_opacity:0.5,
				onClose: function(){
					console.info("Thanks!");
				}
			});
		});
	});
	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>

		<div class="theme">消息插件演示用例。</div>
		<strong>1.</strong>
		简单消息提示 <em>simple message</em> <a id="exp1" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">hy.message("Hello World!");
</code></pre>
		<p>&nbsp;</p>
		
		<strong>2.</strong>
		模态消息提示 <em>modal message</em> 模态消息提示必须关闭后才能进行其他操作。<a id="exp2" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">hy.message("Hello World!", true);
</code></pre>
		<p>&nbsp;</p>

		<strong>3.</strong>
		定位消息提示 <em>position message</em> 通过["top:2","right:2"]指定消息位置为右上角 定位属性left | top | right | bottom
		<a id="exp3" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">hy.message("Hello World!", ["top:2","right:2"]);
</code></pre>
		<p>&nbsp;</p>

		<strong>4.</strong>
		消息提示类型 <em>message type</em> 类型: success | info | warning | error | confirm 默认值:info
		<a id="exp4" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">hy.message("Hello World!","warning");
</code></pre>
		<p>&nbsp;</p>

		<strong>5.</strong>
		确认对话框 <em>confirm dialog</em>  这是简单的调用，但是没有什么实际效果的。
		<a id="exp5" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">hy.message("Are you sure?","confirm");
</code></pre>
		<p>&nbsp;</p>

		<strong>6.</strong>
		增强确认对话框 <em>confirm dialog</em>  确认对话框应该是模态的并有返回值，这里以回调函数实现。
		<a id="exp6" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">hy.message("Are you sure?",{
    type: "confirm",
    modal: "true",
    title: "信息提示", // 非确认对话框也可以指定
    onConfirm: function(b) { 
        var m = b ? "点击了确定" : "点击了取消";
        hy.message(m,{
            auto_close : true, // 自动关闭
            show_close: false // 显示关闭按钮
        });
    }
});
</code></pre>
		<p>&nbsp;</p>

		<strong>7.</strong>
		默认设置 <em>default settings</em> 
		<pre><code class="javascript">// 默认的配置信息
message.defaults = {
    type: "info", // 类型: info - 消息, success - 成功, warning - 警告, error - 错误, confirm - 确认
    modal: false, // 模态
    shadow_bgcolor: "#666", // 阴影背景色
    shadow_opacity: 0.9, // 阴影透明度
    show_close: true, // 显示关闭按钮
    auto_close: false, // 自动关闭
    animation: "fade up", // 显示动画效果
    onClose: function() {}, // 关闭事件
    onConfirm: function(b) {} // 确认对话框回调事件 
};
</code></pre>
		<p>&nbsp;</p>

	<strong>8.</strong>
		综合演示 
		<a id="exp8" href="javascript:void(0);">点击试试</a>
		<pre><code class="javascript">// 综合演示
hy.message("Design by sylthasgg@gmail.com",{
    modal: true,
    title: "message plugin for hyui",
    type: "success",
    auto_close: true,
    position:["right:2","bottom:2"],
    shadow_bgcolor:"#ff0",
    shadow_opacity:0.5,
    onClose: function(){
        console.info("Thanks!");
    }
});
</code></pre>
		<p>&nbsp;</p>

		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>
	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>